<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="./lib/vue.js"></script>
  <!-- import JavaScript -->
  <script src="./element-ui/lib/index.js"></script>

  <script src="diy.js"></script>
  <title>todolist</title>
</head>

<body>
  <div id="app">
        <div id="components-demo">
                <button-counter></button-counter>
              </div>

    <el-container>
      <el-header height="20">
        <h1>ToDoList</h1>
        <div id="components-demo">
                <button-counter></button-counter>
              </div>
      </el-header>
      <el-main>
        <el-input placeholder="回车添加待办事项" class="todoinput" @keyup.enter.native="add" v-model="newtodo.content"></el-input>
        <p>进行中：{{ todolist.length }} 已完成：{{ donenum }}</p>
        <el-row v-for="(item, index) in todolist" class="list-row">
          <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ red: !todolist[index].done, 'green': todolist[index].done }">
            <el-checkbox size="mini" v-model="item.done"></el-checkbox>
          </el-col>
          <el-col :xs="20" :sm="22" :md="22" :lg="22" :xl="22">
            <input type="text" v-model="item.content" class="ipcont" :class="{done: todolist[index].done}">
          </el-col>
          <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
            <i class="el-icon-close" @click="del(index)"></i>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  <script>
    var STORAGE_KEY = 'todolist'

      function fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
          || '[]')
      }
      function save(items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
      }

//--------------------------------------------------
    var doit = new Vue({
      el: '#app',
      data: {
        newtodo: {
          content: '',
          done: false
        },
        todolist: fetch()
      },
      methods: {
        add: function () {
          if (this.newtodo.content) {
            this.todolist.push(this.newtodo)
            this.newtodo = { content: '', done: false }
          }
        },
        del: function (index) {
          this.todolist.splice(index, 1)
        }
      },
      computed: {
        donenum: function () {
          return this.todolist.filter(function (val) { return val.done }).length
        }
      },
      watch: {
        todolist: {
        handler(items) {
          save(items)
        },
        deep: true
      }
      }
    })
  </script>
  <style>
    /*#FBFBFB #B9E1DC   #F38181  #756C83 */

    #app {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #756C83;
    }

    .el-header {
      text-align: center;
    }

    .todoinput {
      margin-bottom: 40px;
    }

    .list-row {
      height: 40px;
      background-color: #fbfbfb;
      margin-bottom: 5px;
    }

    .check {
      text-align: center;
      line-height: 40px;
    }

    .red {
      border-left: #ef5f65 2px solid;
    }

    .green {
      border-left: #B9E1DC 2px solid;
    }

    .ipcont {
      width: 90%;
      margin-top: 8px;
      border: 0;
      line-height: 24px;
      background-color: transparent;
      font-size: 16px;
      color: #756C83;
    }

    .close {
      text-align: center;
      line-height: 40px;
    }

    .el-icon-close {
      cursor: pointer;
    }

    .el-icon-close:hover {
      color: #ef5f65;
    }

    .done {
      text-decoration: line-through;
    }
  </style>
</body>

</html>